import type { CSSProperties } from 'react'
import { Select } from 'antd'
import { useBackController } from '@inbiz/hooks'
const { Option } = Select;

interface IEque {
  cls?: string;
}

interface IOption {
  label: string;
  value: string | number;
}
interface IDataType extends IEque {
  style?: CSSProperties;
  datakey: string;
  typeOption: IOption[];
  value: string;
  link: string;
  onChange: (val: { [key: string]: string }) => void;
  isDesigner?: boolean
}

/**
 * 值来源类型组件
 * **/
export const DataTypeSelect = (props: IDataType) => {
  const isDesigner = useBackController();
  const typeOption = props.typeOption ?? [
    {
      label: '自定义',
      value: 'const'
    },
    {
      label: '节点数据',
      value: 'node'
    },
    {
      label: '组件',
      value: 'comp'
    }, {
      label: '上下文',
      value: 'context'
    }
  ]

  const cls = props.cls ? props.cls + '-typeSelect' : '';

  function handleChange(value: string) {
    props.onChange({
      [props.datakey]: value,
      [props.link]: ''
    })
  }


  return (
    <Select
      className={cls}
      placeholder={'请选择'}
      style={{
        minWidth: 100,
        ...props.style
      }}
      value={props.value}
      onChange={handleChange}>
      {
        typeOption.map((item) => {
          if (isDesigner && item.value == "comp") {
            return null
          }
          return <Option key={item.value} value={item.value}>{item.label}</Option>
        })
      }
    </Select>
  )
}